import React, { useEffect, useRef, useState } from "react";
import styles from "./peifulv.module.scss";
import XxtvCard from "../card/xxtv-card";
/**
 * 
 * @param {} param0 
 * @returns
 * @description 赔付率模块
 */
const XxPeifulvComponent = ({
    claimRatio = 0.00,// 满期赔付率（当年保单）
    lastClaimRatio = 0.00, // 满期赔付率（上年保单）
    csClaimRatio = 0.00, // 满期赔付率（当年保单—车损险）
    lastCsClaimRatio = 0.00, // 满期赔付率（上年保单—车损险）
    dnlnClaimRatio = 0.00 // 历年制赔付率（滚动一年）
}) => {
    const colors = ["#ffc107", "#cd5c5c"];
    const [state, setState] = useState({
        test1: {
            cur: '43%',
            pre: '78%'
        },
        carD: {
            cur: '58%',
            pre: '73%'
        },
        lst: "49%"
    })
    return (
        <>
            <XxtvCard
                title="赔付率"
            >
                <div className={styles.module}>
                    <div className="center-item">
                        <div className="item-content">
                            <div className="echart-box">
                                <div className="echart-item">
                                    <div className="echart">
                                        <div className="target"></div>
                                        <div className="gre" style={{
                                            width: claimRatio + "%",
                                            backgroundColor: colors[0]
                                        }}></div>
                                    </div>
                                    <div className="text">
                                        当年保单：{claimRatio + "%"}
                                    </div>
                                </div>
                                <div className="echart-item">
                                    <div className="echart">
                                        <div className="target"></div>
                                        <div className="gre" style={{
                                            width: lastClaimRatio + "%",
                                            backgroundColor: colors[1]
                                        }}></div>
                                    </div>
                                    <div className="text">
                                        上年保单：{lastClaimRatio + "%"}
                                    </div>
                                </div>
                            </div>
                            <div className="title-box">
                                <span className="icon"></span>
                                <span className="text">满期赔付率</span>
                            </div>
                        </div>
                    </div>
                    <div className="center-item">
                        <div className="item-content">
                            <div className="echart-box">
                                <div className="echart-item">
                                    <div className="echart">
                                        <div className="target"></div>
                                        <div className="gre" style={{
                                            width: csClaimRatio + "%",
                                            backgroundColor: colors[0]
                                        }}></div>
                                    </div>
                                    <div className="text">
                                        当年保单：{csClaimRatio + "%"}
                                    </div>
                                </div>
                                <div className="echart-item">
                                    <div className="echart">
                                        <div className="target"></div>
                                        <div className="gre" style={{
                                            width: `${lastCsClaimRatio}%`,
                                            backgroundColor: colors[1]
                                        }}></div>
                                    </div>
                                    <div className="text">
                                        上年保单：{lastCsClaimRatio + "%"}
                                    </div>
                                </div>
                            </div>
                            <div className="title-box">
                                <span className="icon"></span>
                                <span className="text">满期赔付率（车损险）</span>
                            </div>
                        </div>
                    </div>
                    <div className="center-item">
                        <div className="item-content">
                            <div className="echart-box">

                                <div className="echart-item">
                                    <div className="echart">
                                        <div className="target"></div>
                                        <div className="gre" style={{
                                            width: dnlnClaimRatio * 100 + "%",
                                            backgroundColor: colors[1]
                                        }}></div>
                                    </div>
                                    <div className="text">
                                        历年制：{dnlnClaimRatio * 100 + "%"}
                                    </div>
                                </div>
                            </div>
                            <div className="title-box">
                                <span className="icon"></span>
                                <span className="text">历年制赔付率（滚动1年）</span>
                            </div>
                        </div>
                    </div>

                </div>
            </XxtvCard>



        </>
    )
}
export default XxPeifulvComponent